/* ======================================================
   <!-- Table -->
/* ====================================================== */
@import '@poemkit/components/_utils/styles/_variable-and-mixin.scss';


/*
 * 1. Generic
*/

$table-border-color: #d6d5d5;

/*
 ---------------------------
 1. Generic
 ---------------------------
 */
.rtl table.poemkit-table,
.rtl .poemkit-table table {

	th,
	td {
		border-left: none;
		border-right: 1px solid $table-border-color;


	}

	thead {

		th {

			&.poemkit-t-r {
				text-align: left;
			}

			&.poemkit-t-l {
				text-align: right;
			}


			/* The breakpoint is the same as bootstrap 4 */
			/*
			--breakpoint-xs:0;
			--breakpoint-sm:576px;
			--breakpoint-md:768px;
			--breakpoint-lg:992px;
			--breakpoint-xl:1200px;
			*/
			@media all and (max-width: 576px) {
				&.poemkit-t-r--sm {
					text-align: left;
				}

				&.poemkit-t-l--sm {
					text-align: right;
				}
			}

			@media all and (max-width: 768px) {
				&.poemkit-t-r--md {
					text-align: left;
				}

				&.poemkit-t-l--md {
					text-align: right;
				}
			}

			@media all and (max-width: 992px) {
				&.poemkit-t-r--lg {
					text-align: left;
				}

				&.poemkit-t-l--lg {
					text-align: right;
				}
			}


			@media all and (max-width: 1200px) {
				&.poemkit-t-r--xl {
					text-align: left;
				}

				&.poemkit-t-l--xl {
					text-align: right;
				}
			}


		}
	}




}



@media all and (max-width: 768px) {

	.rtl table.poemkit-table.is-responsive,
	.rtl .poemkit-table.is-responsive table {

		tbody {

			td {

				&::before {
					float: right;
					border-left: 1px solid $table-border-color;
					margin-right: auto;
					margin-left: 0.5rem;

				}

			}

		}


	}


	/* With scroll bars */
	.rtl .js-poemkit-table--responsive-scrolled table,
	.rtl table.js-poemkit-table--responsive-scrolled {


		thead {
			float: right;


		}
		tbody {
			float: right;
			border-left: 1px solid $table-border-color;
		}

		th,
		tbody td {

			&:not(last-child) {
				border-left: 0;
			}

		}


	}


}
